<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园答疑助手 - 学生管理</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4361ee',
            teacher: '#7209b7',
            teacherLight: '#f3e8ff',
            success: '#4cc9f0',
            warning: '#f72585',
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .nav-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      }
      .student-card {
        @apply bg-white rounded-xl p-4 border border-gray-100 hover:border-teacher/30 hover:shadow-md transition-all duration-300;
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-teacher/50 focus:border-teacher focus:outline-none;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <nav class="bg-white nav-shadow sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <button class="text-gray-500 hover:text-teacher transition-colors">
        <i class="fa fa-arrow-left text-lg"></i>
      </button>
      <h1 class="text-lg font-bold text-gray-800">学生管理</h1>
      <button class="text-gray-500 hover:text-teacher transition-colors">
        <i class="fa fa-search text-lg"></i>
      </button>
    </div>
  </nav>

  <!-- 班级筛选 -->
  <div class="bg-white border-b border-gray-100 py-3 overflow-x-auto">
    <div class="container mx-auto px-4 flex items-center gap-3 min-w-max">
      <button class="px-4 py-1.5 bg-teacher text-white rounded-full text-sm whitespace-nowrap">
        全部班级
      </button>
      <button class="px-4 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-sm transition-colors whitespace-nowrap">
        计算机2101班
      </button>
      <button class="px-4 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-sm transition-colors whitespace-nowrap">
        计算机2102班
      </button>
      <button class="px-4 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-sm transition-colors whitespace-nowrap">
        电子2101班
      </button>
      <button class="px-4 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-sm transition-colors whitespace-nowrap">
        自动化2101班
      </button>
    </div>
  </div>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6">
    <!-- 统计卡片 -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
      <div class="bg-white rounded-xl p-4 shadow-sm">
        <div class="text-gray-500 text-sm mb-1">总学生数</div>
        <div class="text-2xl font-bold text-teacher">142</div>
      </div>
      <div class="bg-white rounded-xl p-4 shadow-sm">
        <div class="text-gray-500 text-sm mb-1">活跃学生</div>
        <div class="text-2xl font-bold text-teacher">98</div>
      </div>
      <div class="bg-white rounded-xl p-4 shadow-sm">
        <div class="text-gray-500 text-sm mb-1">提问数</div>
        <div class="text-2xl font-bold text-teacher">256</div>
      </div>
      <div class="bg-white rounded-xl p-4 shadow-sm">
        <div class="text-gray-500 text-sm mb-1">平均成绩</div>
        <div class="text-2xl font-bold text-teacher">82.5</div>
      </div>
    </div>

    <!-- 搜索与筛选 -->
    <div class="bg-white rounded-xl p-4 shadow-sm mb-6">
      <div class="flex flex-col md:flex-row gap-4">
        <div class="relative flex-1">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
            <i class="fa fa-search"></i>
          </span>
          <input type="text" placeholder="搜索学生姓名或学号" 
            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus transition-all">
        </div>
        <div class="relative w-full md:w-40">
          <select class="w-full pl-4 pr-10 py-2 border border-gray-300 rounded-lg input-focus transition-all appearance-none bg-white">
            <option>全部课程</option>
            <option>高等数学（上）</option>
            <option>线性代数</option>
            <option>复变函数</option>
          </select>
          <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
            <i class="fa fa-chevron-down text-sm"></i>
          </div>
        </div>
        <div class="relative w-full md:w-40">
          <select class="w-full pl-4 pr-10 py-2 border border-gray-300 rounded-lg input-focus transition-all appearance-none bg-white">
            <option>全部活跃度</option>
            <option>高活跃</option>
            <option>中活跃</option>
            <option>低活跃</option>
          </select>
          <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
            <i class="fa fa-chevron-down text-sm"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 学生列表 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
      <div class="p-4 border-b border-gray-100 flex items-center justify-between">
        <h2 class="font-bold text-gray-800">学生列表</h2>
        <div class="text-sm text-gray-500">共142名学生</div>
      </div>
      
      <div class="divide-y divide-gray-100">
        <!-- 学生1 -->
        <div class="student-card rounded-none">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/237/200" alt="学生头像" class="w-10 h-10 rounded-full">
              <div>
                <div class="flex items-center gap-2">
                  <h3 class="font-medium text-gray-800">李同学</h3>
                  <span class="bg-warning/10 text-warning text-xs px-1.5 py-0.5 rounded-full">需关注</span>
                </div>
                <p class="text-xs text-gray-500">学号：20210012345 | 计算机2101班</p>
              </div>
            </div>
            
            <div class="flex flex-wrap items-center gap-6">
              <div class="text-center">
                <div class="font-medium text-gray-800">12</div>
                <div class="text-xs text-gray-500">提问</div>
              </div>
              <div class="text-center">
                <div class="font-medium text-gray-800">B+</div>
                <div class="text-xs text-gray-500">成绩</div>
              </div>
              <div class="text-center">
                <div class="font-medium text-gray-800">高</div>
                <div class="text-xs text-gray-500">活跃度</div>
              </div>
              <button class="text-teacher hover:text-teacher/80 transition-colors">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 学生2 -->
        <div class="student-card rounded-none">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/1027/200" alt="学生头像" class="w-10 h-10 rounded-full">
              <div>
                <div class="flex items-center gap-2">
                  <h3 class="font-medium text-gray-800">王同学</h3>
                  <span class="bg-success/10 text-success text-xs px-1.5 py-0.5 rounded-full">优秀</span>
                </div>
                <p class="text-xs text-gray-500">学号：20210012367 | 计算机2101班</p>
              </div>
            </div>
            
            <div class="flex flex-wrap items-center gap-6">
              <div class="text-center">
                <div class="font-medium text-gray-800">8</div>
                <div class="text-xs text-gray-500">提问</div>
              </div>
              <div class="text-center">
                <div class="font-medium text-gray-800">A</div>
                <div class="text-xs text-gray-500">成绩</div>
              </div>
              <div class="text-center">
                <div class="font-medium text-gray-800">高</div>
                <div class="text-xs text-gray-500">活跃度</div>
              </div>
              <button class="text-teacher hover:text-teacher/80 transition-colors">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 学生3 -->
        <div class="student-card rounded-none">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/1012/200" alt="学生头像" class="w-10 h-10 rounded-full">
              <div>
                <div class="flex items-center gap-2">
                  <h3 class="font-medium text-gray-800">赵同学</h3>
                  <span class="bg-gray-100 text-gray-600 text-xs px-1.5 py-0.5 rounded-full">一般</span>
                </div>
                <p class="text-xs text-gray-500">学号：20210012389 | 电子2101班</p>
              </div>
            </div>
            
            <div class="flex flex-wrap items-center gap-6">
              <div class="text-center">
                <div class="font-medium text-gray-800">3</div>
                <div class="text-xs text-gray-500">提问</div>
              </div>
              <div class="text-center">
                <div class="font-medium text-gray-800">B</div>
                <div class="text-xs text-gray-500">成绩</div>
              </div>
              <div class="text-center">
                <div class="font-medium text-gray-800">中</div>
                <div class="text-xs text-gray-500">活跃度</div>
              </div>
              <button class="text-teacher hover:text-teacher/80 transition-colors">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 学生4 -->
        <div class="student-card rounded-none">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/1025/200" alt="学生头像" class="w-10 h-10 rounded-full">
              <div>
                <div class="flex items-center gap-2">
                  <h3 class="font-medium text-gray-800">陈同学</h3>
                  <span class="bg-warning/10 text-warning text-xs px-1.5 py-0.5 rounded-full">需关注</span>
                </div>
                <p class="text-xs text-gray-500">学号：20210012401 | 自动化2101班</p>
              </div>
            </div>
            
            <div class="flex flex-wrap items-center gap-6">
              <div class="text-center">
                <div class="font-medium text-gray-800">1</div>
                <div class="text-xs text-gray-500">提问</div>
              </div>
              <div class="text-center">
                <div class="font-medium text-gray-800">C+</div>
                <div class="text-xs text-gray-500">成绩</div>
              </div>
              <div class="text-center">
                <div class="font-medium text-gray-800">低</div>
                <div class="text-xs text-gray-500">活跃度</div>
              </div>
              <button class="text-teacher hover:text-teacher/80 transition-colors">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="p-4 border-t border-gray-100 flex items-center justify-between">
        <div class="text-sm text-gray-500">显示 1-4 条，共 142 条</div>
        <div class="flex items-center gap-1">
          <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:border-teacher hover:text-teacher transition-colors">
            <i class="fa fa-angle-left"></i>
          </button>
          <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-teacher text-white">1</button>
          <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 hover:border-teacher hover:text-teacher transition-colors">2</button>
          <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 hover:border-teacher hover:text-teacher transition-colors">3</button>
          <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:border-teacher hover:text-teacher transition-colors">
            <i class="fa fa-angle-right"></i>
          </button>
        </div>
      </div>
    </div>
  </main>

  <!-- 底部导航（移动端） -->
  <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-2 px-6 flex justify-around">
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-home text-lg"></i>
      <span class="text-xs mt-1">首页</span>
    </a>
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-question-circle text-lg"></i>
      <span class="text-xs mt-1">答疑</span>
    </a>
    <a href="#" class="flex flex-col items-center text-teacher">
      <i class="fa fa-users text-lg"></i>
      <span class="text-xs mt-1">学生</span>
    </a>
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-user text-lg"></i>
      <span class="text-xs mt-1">我的</span>
    </a>
  </div>
</body>
</html>